<template>
  <view class="page">
    <!-- 顶部图片 -->
    <view class="header">
      <image class="header-image" src="http://115.159.81.246:9000/supermarket/7FA6968FD8B2424BAE05C040327550E1.png" mode="widthFix"></image>
    </view>
    <!-- 静态商品列表 -->
    <view class="product-list">
      <view class="product-item" v-for="(item, index) in products" :key="index">
        <image class="product-image" :src="item.image" mode="widthFix"></image>
        <view class="product-info">
          <text class="product-title">{{ item.title }}</text>
          <text class="product-price">¥{{ item.price }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { title: '时尚甜美蕾丝短袖衫', price: 65, image: 'http://115.159.81.246:9000/supermarket/25624259A1B4E58588EE8569D0E53D0F.png' },
        { title: '钩花蕾丝衬衣', price: 184, image: 'http://115.159.81.246:9000/supermarket/25624259A1B4E58588EE8569D0E53D0F.png' },
        { title: '薄款V领针织衫', price: 120, image: 'http://115.159.81.246:9000/supermarket/25624259A1B4E58588EE8569D0E53D0F.png' },
        { title: '粉色蕾丝修身连衣裙', price: 210, image: 'http://115.159.81.246:9000/supermarket/25624259A1B4E58588EE8569D0E53D0F.png' },
		{ title: '时尚甜美蕾丝短袖衫', price: 65, image: 'http://115.159.81.246:9000/supermarket/25624259A1B4E58588EE8569D0E53D0F.png' },
		{ title: '钩花蕾丝衬衣', price: 184, image: 'http://115.159.81.246:9000/supermarket/25624259A1B4E58588EE8569D0E53D0F.png' },
		{ title: '薄款V领针织衫', price: 120, image: 'http://115.159.81.246:9000/supermarket/25624259A1B4E58588EE8569D0E53D0F.png' },
		{ title: '粉色蕾丝修身连衣裙', price: 210, image: 'http://115.159.81.246:9000/supermarket/25624259A1B4E58588EE8569D0E53D0F.png' },
		{ title: '时尚甜美蕾丝短袖衫', price: 65, image: 'http://115.159.81.246:9000/supermarket/25624259A1B4E58588EE8569D0E53D0F.png' },
		{ title: '钩花蕾丝衬衣', price: 184, image: 'http://115.159.81.246:9000/supermarket/25624259A1B4E58588EE8569D0E53D0F.png' },
		{ title: '薄款V领针织衫', price: 120, image: 'http://115.159.81.246:9000/supermarket/25624259A1B4E58588EE8569D0E53D0F.png' },
		{ title: '粉色蕾丝修身连衣裙', price: 210, image: 'http://115.159.81.246:9000/supermarket/25624259A1B4E58588EE8569D0E53D0F.png' }
      ]
    }
  }
}
</script>

<style scoped>
.page {
  background-color: #f8f8f8;
  padding: 20rpx;
}

.header {
  margin-bottom: 20rpx;
}

.header-image {
  width: 100%;
  border-radius: 8rpx;
}

.product-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around; /* 改这里 */
}

.product-item {
  width: 43%;
 
  background-color: #fff;
  border-radius: 8rpx;
  margin-bottom: 15rpx; /* 让上下间距也小一点 */
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
  padding-bottom: 8rpx; /* 给底部一点呼吸空间 */
}

.product-image {
  width: 100%;
  height: 100%;  /* 让高度和宽度一样 */
  aspect-ratio: 1 / 1;  /* 保证宽高比是1:1，部分平台支持 */
  object-fit: cover;  /* 图片填满且裁剪 */
}

.product-info {
  padding: 8rpx 10rpx; /* 上下内边距更紧凑 */
  display: flex;
  flex-direction: column;
}

.product-title {
  font-size: 22rpx; /* 字体再小一点 */
  color: #333;
  margin-bottom: 3rpx; /* 更小的间距 */
}

.product-price {
  font-size: 18rpx; /* 价格字体也缩小 */
  color: #ff6b35;
}

</style>